<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Document</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/learning.css">
  <link rel="stylesheet" href="css/iconfont.css">
</head>

<body>
  <div class="container">
    <header>
      <div class="header-search">
        <i class="iconfont">&#xe682;</i>
        <form action="" id="goSearch" onsubmit="return false">
          <input type="search" autocapitalize="off" placeholder="搜索课程名称或者关键字">
        </form>
      </div>
    </header>
    <section>
      <ul>

      </ul>
    </section>
    <footer>
      <ul>
        <li>
          <a href="index.html">
            <img src="./img/icon_tab_sy_n@2x.png" alt="">
            <span>首页</span>
          </a>
        </li>
        <li>
          <a href="./curriculum.html">
            <img src="./img/icon_tab_sy_n@2x.png" alt="">
            <span>在线课程</span>
          </a>
        </li>
        <li>
          <a href="./learning.html">
            <img src="./img/icon_tab_xxlj_s.png" alt="">
            <span>学习路线</span>
          </a>
        </li>
        <li>
          <a href="about.html">
            <img src="./img/icon_tab_gywm_n.png" alt="">
            <span>关于我们</span>
          </a>
        </li>
      </ul>
    </footer>

  </div>
  <script src="./js/flexible.js"></script>
  <script src="./js/zepto.min.js"></script>
  <script src="./js/zepto.touch.js"></script>
  <script>
    $(function () {
      //当前页
      var pages = 1;
      //当前页的数量
      var sizes = 12;
      // 页面数据
      var result = '';

      // 运行请求
      fAjax(pages)

      // 滚动条事件
      $('section').scroll(function () {
        // 滚动距离
        var scrollTop = $(this).scrollTop()
        // section当前可视区域高度
        var cilentHeight = $(this).height()
        // section整个的高度
        var height = $('section ul').height()
        if (height <= scrollTop + cilentHeight) {
          pages++;
          fAjax(pages++);
        }
      })

      // 键盘事件
      $('#goSearch').on('keypress', function (e) {
        var keycode = e.keyCode;
        var val = $(this).find('input').val();

        // 点击了搜索按钮
        if (keycode == '13') {
          pages = 1;
          result = '';
          fAjax(pages, val);
          document.activeElement.blur();
        }
      })

      // 点击空白处，收起键盘
      window.addEventListener('touchstart', function () {
        document.activeElement.blur();
      }, false)

      // 请求ajax函数
      function fAjax(pages, val) {
        $.ajax({
          url: 'http://39.101.217.150:8075/course/list',
          data: {
            page: pages,
            size: sizes,
            name: val
          },
          success: function (data) {
            var records = data.data.records
            if (records.length) {
              $.each(records, function (index, item) {
                result += `
                <li>
                   <h3>${item.name}</h3>
                   <p>${item.courseContent}</p>
                   <div>
                     <a href="${item.courseUrl}">立即学习</a>
                   </div>
                </li>
               `;
              });
              // 添加内容
              $('section ul').html(result)
            }
          }
        })
      }
    })
  </script>
</body>

</html>